<template>
  <div class="calender-container">
    <el-card shadow="never">
      <!-- 自定义头部，切换视图类型和切换日期 -->
      <div class="calender-header mb2">
        <div class="header-left">
          <span class="time-title">{{ currentDate }}</span>
          <el-button
            :icon="ArrowLeftBold"
            circle
            @click="
              Tcalendar.prev();
              dayTime();
            "
          />
          <el-button
            :icon="ArrowRightBold"
            circle
            @click="
              Tcalendar.next();
              dayTime();
            "
          />
        </div>
        <div class="header-right">
          <el-button
            class="btn-m2"
            type="primary"
            @click="
              Tcalendar.today();
              dayTime();
            "
            plain
            round
            >今天</el-button
          >
          <el-select v-model="type" placeholder="视图类型" style="width: 80px" @change="changeType">
            <!-- <el-option label="月" value="dayGridMonth" /> -->
            <el-option label="周" value="timeGridWeek" />
            <el-option label="天" value="timeGridDay" />
            <el-option label="列" value="listWeek" />
          </el-select>
          <!-- 选择月份的日期框 -->
          <el-date-picker
            v-if="type === 'dayGridMonth'"
            v-model="showMonth"
            type="month"
            :clearable="false"
            placeholder="请选择日期"
            style="margin-left: 10px; vertical-align: middle"
            @change="changeDate"
          />
          <el-button class="ml2" type="primary" :icon="Plus" plain  @click="openAddPlan"
            >会议室预约</el-button
          >
        </div>
      </div>
      <div ref="fullcalendar" class="card"></div>
    </el-card>

    <!-- 查看任务详情弹窗 -->
    <calendarDetailDialog v-model:dialogVisible="calendarDialogVisible" :detailInfo="detailInfo" />
    <!-- 新增任务弹窗 -->
    <drawerAddPlan v-model:drawerVisile="drawerVisile" />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, watch } from 'vue';
import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
import dayjs from 'dayjs';
import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
import calendarDetailDialog from './calendarDetailDialog.vue';
import drawerAddPlan from './drawerAddPlan.vue';
import { useRoomReserveStore } from '@/store/roomReserve';
import { storeToRefs } from 'pinia';
import { getRoomById } from '@/api/meeting';
const props = defineProps({
  modelValue: {
    type: Array,
    default: [],
  },
});

const useRoomReserve = useRoomReserveStore();
const { roomReserveList, reserveForm } = storeToRefs(useRoomReserve);
onMounted(() => {
  console.log(props.modelValue);
  props.modelValue.forEach((item) => {
    if(item.status === 2){
      return
    }
    item.start = dayjs(item.startTime).format('YYYY-MM-DD HH:mm:ss');
    item.end = dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss');
  });
  state.infoList = props.modelValue;
  initCalendar();
});
const state = {
  infoList: props.modelValue,
  Tcalendar: ref(),
};
console.log(props.modelValue);
const fullcalendar = ref();
const Tcalendar = ref();
const type = ref('timeGridWeek'); // 默认月视图
const currentDate = ref(); // 当前时间
const showMonth = ref(dayjs().format('YYYY-MM')); // 默认当前月份
const calendarDialogVisible = ref(false); // 是否显示详情弹窗
const detailInfo = ref(); // 详情数据
const drawerVisile = ref(false); // 是否显示新增排班的抽屉

const initCalendar = () => {
  Tcalendar.value = new Calendar(fullcalendar.value, {
    plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
    initialView: type.value,
    aspectRatio: 2.2, // 宽度比
    locale: 'zh-cn',
    handleWindowResize: true,
    //   loading: loading //控制表格加载
    // editable: true, // 允许编辑表格
    droppable: true, //允许从外部拖拽进入日历
    eventDurationEditable: true, //控制时间段是否可以拖动
    eventResizableFromStart: true, //控制事件是否可以拖动
    selectable: true, // 允许用户通过单击和拖动来突出显示多个日期或时间段
    firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推。
    unselectAuto: true, // 当点击页面日历以外的位置时，是否自动取消当前的选中状态
    dayMaxEvents: true, //在dayGrid视图中，给定日期内的最大事件数
    headerToolbar: false, // 关闭默认日历头部，采取自定义的方式切换日历视图
    allDaySlot: true, // 全天选项
    allDayText: '全天',
    nowIndicator: true,
    eventMaxStack: 2,
    events: state.infoList, //主要数据
    eventClassNames: function (arg) {
      // 添加自定义class
      return [arg.event.extendedProps.class];
    },
    eventContent: function (arg) {
      // 日历上event显示的样式
        const italicEl = document.createElement('div');
        // 列表才显示
        if (type.value === 'listWeek') {
          const nameEl = document.createElement('div');
          nameEl.setAttribute('class', `calendar-item`);
          nameEl.innerHTML = `<p>主持人:</p>${arg.event.extendedProps.createBy}`;
          italicEl.append(nameEl);
          //备注
          const remark = document.createElement('div');
          remark.setAttribute('class', `calendar-item`);
          remark.innerHTML = `<p>备注:</p>${
            arg.event.extendedProps.remark ? arg.event.extendedProps.remark : '暂无备注'
          }`;
          italicEl.append(remark);
        } else {
          // //会议主题
          // const titleEl = document.createElement('div');
          // titleEl.setAttribute('class', `calendar-item`);
          // titleEl.innerHTML = `<p>会议主题:</p>${arg.event.title}`;
          // italicEl.append(titleEl);
          //会议主持人
          const nameEl = document.createElement('div');
          nameEl.setAttribute('class', `calendar-item`);
          nameEl.innerHTML = `<p>主持人:</p>${arg.event.extendedProps.createBy}`;
          italicEl.append(nameEl);
          //备注

          // // 会议时间
          // const timeEl = document.createElement('div');
          // timeEl.setAttribute('class', `calendar-item`);
          // if (arg.event.start && arg.event.end) {
          //   timeEl.innerHTML = `<p>会议时间:</p>${dayjs(arg.event.start).format('HH:mm')}-
          //     ${dayjs(arg.event.end).format('HH:mm')}`;
          // }
          // italicEl.append(timeEl);
          //会议备注
          const startTime = new Date(arg.event._instance?.range.start); // 假设 arg.event.start 是一个 Date 对象或者可以被解析为 Date 的字符串
          const endTime = new Date(arg.event._instance?.range.end); // 同理，假设 arg.event.end 是一个 Date 对象
          // // 计算时间差，单位为毫秒
          const timeDifference = endTime.getTime() - startTime.getTime();
          // 判断是否大于等于 1 小时（1小时 = 3 * 3600 * 1000 毫秒）
          if (timeDifference >= 1 * 3600 * 1000) {
            const remark = document.createElement('div');
            remark.setAttribute('class', `calendar-item`);
            remark.innerHTML = `<p>备注:</p>${
              arg.event.extendedProps.remark ? arg.event.extendedProps.remark : '暂无备注'
            }`;
            italicEl.append(remark);
            // const text2El = document.createElement('div');
            // text2El.setAttribute('class', `calendar-item`);
            // text2El.innerHTML = `<p>会议大纲:</p>${arg.event.extendedProps.description}`;
            // italicEl.append(text2El);
          }
        }
        italicEl.setAttribute('class', `calendar-card`);
        return { domNodes: [italicEl] };
    },
    noEventsContent: function () {
      const noEl = document.createElement('div');
      noEl.innerHTML = '暂无日程安排，请安排相关日程';
      return { domNodes: [noEl] };
    },
    // 点击查看时触发
    eventClick: function (info) {
      handleClick(info);
    },
    // 视图选择日期触发
    select: function (info) {
      handleSelectDate(info);
    },
    // 拖拽event大小时触发
    eventResize: function (info) {
      handleEventResize(info);
    },
    // 拖拽停止时触发
    eventDrop: function (info) {
      handleDrap(info);
    },
  });
  Tcalendar.value.render();
};

//   切换类型
const changeType = (type: any) => {
  Tcalendar.value.changeView(type);
  dayTime();
};

/**
 * 获取当前时间
 */
const dayTime = () => {
  if (type.value === 'dayGridMonth') {
    currentDate.value = dayjs(Tcalendar.value.getDate()).format('YYYY年MM月');
    // showMonth.value = dayjs(Tcalendar.value.getDate()).format('YYYY-MM');
  } else if (type.value === 'timeGridWeek' || type.value === 'listWeek') {
    currentDate.value =
      dayjs(Tcalendar.value.getDate()).format('YYYY年MM月DD日') +
      ' - ' +
      dayjs(Tcalendar.value.getDate()).add(6, 'day').format('DD日');
  } else if (type.value === 'timeGridDay') {
    currentDate.value = dayjs(Tcalendar.value.getDate()).format('YYYY年MM月DD日');
  }
};

/**
 * 修改月份
 * @param date 跳转日期
 */
const changeDate = (date: any) => {
  Tcalendar.value.gotoDate(dayjs(date).format('YYYY-MM'));
  currentDate.value = dayjs(date).format('YYYY年MM月');
};

/**
 * 拖拽调整大小
 */
const handleDrap = (info: any) => {
  console.log('info1--', info);
};
/**
 * 拖拽调整大小时触发
 */
const handleEventResize = (info: any) => {
  console.log('info2--', info);
};

/**
 * 点击事件，查看任务详情
 */
const handleClick = (info: any) => {
  console.log('info-3-', info.event);
  detailInfo.value = info.event;
  calendarDialogVisible.value = true;
};

const openAddPlan = () => {
  drawerVisile.value = true;
};

const handleSelectDate = (info: any) => {
  console.log('info4--', info);
  reserveForm.value.startTime = info.start;
  reserveForm.value.endTime = info.end;
  drawerVisile.value = true;
};
const handleOk = () => {};
onMounted(() => {
  nextTick(() => {
    initCalendar();
    dayTime();
  });
});
</script>

<style lang="scss" scoped>
.calender-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.calender-header {
  display: flex;
  justify-content: space-between;
  .header-left,
  .header-right {
    display: flex;
    align-items: center;
    .time-title {
      font-weight: bold;
      margin-right: 20px;
    }
  }
  .header-left {
    h1 {
      margin-right: 20px;
    }
  }
}

.btn-m2 {
  margin-right: 20px;
}
.ml2 {
  margin-left: 20px !important;
}
.mb2 {
  margin-bottom: 20px !important;
}
</style>
<style lang="scss">
.c .el-card {
  border: none;
  border-top: 1px solid #e6e6e6;
}
.fc-col-header {
  background-color: #fafafa;
}
.calendar-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5px;
}
.calendar-item {
  display: flex;
  font-size: 13px;
  margin-bottom: 5px;
  p {
    margin: 0;
    font-weight: bold;
    text-wrap: nowrap;
    margin-right: 5px;
  }
}
.fc .fc-daygrid-day.fc-day-today {
  background-color: rgba(101, 180, 230, 0.2);
  .fc-daygrid-day-number {
    background-color: #00b578;
    color: #fff;
    border-radius: 4px;
  }
}
.fc .fc-highlight {
  background: rgba(101, 180, 230, 0.2);
}
.fc .fc-timegrid-col.fc-day-today {
  background-color: rgba(101, 180, 230, 0.2);
}

.fc-v-event {
  border: none;
}
.fc-h-event {
  border: none;
}
.tag_1,
.tag_2,
.tag_3 {
  border-radius: 10px;
}
.tag_1 {
  background-color: #fab6b6;
}
.tag_2 {
  background-color: #a0cfff;
}
.tag_3 {
  background-color: #c8c9cc;
}
</style>
